<!-- 门诊急诊预约情况统计 -->
<template>
  <div class="ky-container">
    <el-card shadow="hover" class="ky-card ky-card-xs ky-card-hdbg">
      <el-form
        ref="ruleForm"
        :model="formData"
        :inline="true"
        class="ky-form-inline ky-form-inline-sm"
        :rules="rules"
        label-width="84px"
      >
        <el-form-item label="医院名称:" prop="hospitalCode">
          <el-select
            size="small"
            class="param-type_input"
            v-model="formData.hospitalCode"
            placeholder="请选择"
            filterable
            @change="handleChange('hospital')"
          >
            <el-option
              v-for="(item,index) in mx_hospitalList"
              :key="index"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="影像区域:">
          <el-select
            size="small"
            class="param-type_input"
            v-model="formData.depArea"
            multiple
            placeholder="请选择"
            clearable
            @change="handleChange('depArea')"
          >
            <el-option
              v-for="(item,index) in depAreaOptions"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="检查部门:">
          <el-select
            size="small"
            class="param-type_input"
            v-model="formData.dep"
            multiple
            placeholder="请选择"
            clearable
            @change="handleChange('dep')"
          >
            <el-option
              v-for="(item,index) in scheduledDepOptions"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="检查设备:">
          <el-select
            size="small"
            class="param-type_input"
            v-model="formData.modality"
            multiple
            placeholder="请选择"
            clearable
            @change="handleChange('modality')"
          >
            <el-option
              v-for="(item,index) in modalityOptions"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="检查机房:">
          <el-select
            size="small"
            class="param-type_input"
            v-model="formData.checkRoom"
            multiple
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="(item,index) in checkRoomOptions"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>-->
        <el-form-item label="患者类型" prop="patType">
          <el-select
            style="width:100%"
            class="param-type_input"
            size="small"
            multiple
            clearable
            v-model="formData.patType"
            placeholder="请选择"
          >
            <el-option
              v-for="item in patTypeOptions"
              :key="item.label"
              :label="item.label"
              :value="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预约时间:" prop="timeRange">
          <el-date-picker
            v-model="formData.timeRange"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <!-- <el-button class="m-l-0 click-button" size="small" @click="resetParam" plain>重置</el-button> -->
          <el-button
            type="primary"
            class="m-l-0 click-button"
            size="small"
            @click="search"
            icon="el-icon-search"
            :loading="dataLoading"
          >查询</el-button>
          <el-button
            :loading="dataLoading||downloadLoading"
            size="small"
            type="danger"
            icon="el-icon-download"
            @click="handleDownload"
          >导出</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="hover" class="ky-card ky-card-hdbg ky-mt10">
      <el-table
        ref="table"
        v-loading="dataLoading"
        size="medium"
        :data="tableData"
        border
        :header-cell-style="{background:'#00c0ef', color:'#fff',fontWeight:'bold'}"
      >
        <el-table-column align="center" prop="ZJYYRC" label="诊间预约人次" min-width="100">
          <template slot-scope="scope">{{!scope.row.JCYYZRC?'0(0.00%)':scope.row.ZJYYRC}}</template>
        </el-table-column>
        <el-table-column align="center" prop="ZZYYRC" label="自助预约人次" min-width="100">
          <template slot-scope="scope">{{!scope.row.JCYYZRC?'0(0.00%)':scope.row.ZZYYRC}}</template>
        </el-table-column>
        <el-table-column align="center" prop="JZYYRC" label="集中预约人次" min-width="100">
          <template slot-scope="scope">{{!scope.row.JCYYZRC?'0(0.00%)':scope.row.JZYYRC}}</template>
        </el-table-column>
        <el-table-column align="center" prop="JCYYZRC" label="检查预约总人次" min-width="100"></el-table-column>
        <el-table-column align="center" prop="ASJCRC" label="按时检查人次" min-width="100">
          <template slot-scope="scope">{{!scope.row.JCYYZRC?'0(0.00%)':scope.row.ASJCRC}}</template>
        </el-table-column>
        <el-table-column align="center" prop="FSDYYJCRC" label="分时段预约检查人次" min-width="100">
          <template slot-scope="scope">{{!scope.row.JCYYZRC?'0(0.00%)':scope.row.FSDYYJCRC}}</template>
        </el-table-column>
        <el-table-column align="center" prop="SYRC" label="爽约人次" min-width="100">
          <template slot-scope="scope">{{!scope.row.JCYYZRC?'0(0.00%)':scope.row.SYRC}}</template>
        </el-table-column>
        <el-table-column align="center" prop="CDRC" label="迟到人次" min-width="100">
          <template slot-scope="scope">{{!scope.row.JCYYZRC?'0(0.00%)':scope.row.CDRC}}</template>
        </el-table-column>
        <el-table-column align="center" prop="ZJJRC" label="总检查人次" min-width="100">
          <template slot-scope="scope">{{!scope.row.JCYYZRC?'0(0.00%)':scope.row.ZJJRC}}</template>
        </el-table-column>
        <el-table-column align="center" prop="YYX" label="云影像" min-width="100">
          <template slot-scope="scope">{{!scope.row.JCYYZRC?'0(0.00%)':scope.row.YYX}}</template>
        </el-table-column>
        <el-table-column align="center" prop="YJP" label="云胶片" min-width="100">
          <template slot-scope="scope">{{!scope.row.JCYYZRC?'0(0.00%)':scope.row.YJP}}</template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { Options } from '@/utils/constant'
import { dateFormatter } from '@/utils/validate'
import { getAppointmentMZJZYYQK, getDepAreaList, getDepList, getModalityList, getCheckRoomList } from '@/api/api.js'
export default {
  name: 'TableAppointmentOPER',
  mixins: [],
  data() {
    return {
      rules: {
        timeRange: { type: 'array', required: true, message: '请选择记录时间', trigger: 'change' }
      },
      formData: {
        hospitalCode: this.$store.state.user.hospitalCode,
        dep: [],
        timeRange: [dateFormatter(new Date(new Date() - 3600 * 1000 * 24 * 6), false), dateFormatter(new Date(), false)],
        depArea: [],
        modality: [],
        // checkRoom: [],
        patType: []
      },
      depAreaOptions: [],
      scheduledDepOptions: [],
      modalityOptions: [],
      // checkRoomOptions: [],
      patTypeOptions: Options.patientTypeItemOptions,

      dataLoading: false,
      downloadLoading: false,
      tableData: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  watch: {},
  computed: {
  },
  created() {

  },
  async mounted() {
    this.$getHospitalList()
    this.formData.hospitalCode = this.$store.state.user.hospitalCode
    try {
      await this.getDepAreaOptions()
      this.getScheduledDepOptions()
      this.getModalityOptions()
      // this.getCheckRoomOptions()
    } catch (err) {
      console.log(err)
    }
    this.search()
  },
  methods: {
    resetParam() {
      // 重置
      this.formData = {
        hospitalCode: this.$store.state.user.hospitalCode,
        dep: [],
        timeRange: [dateFormatter(new Date(new Date() - 3600 * 1000 * 24 * 6), false), dateFormatter(new Date(), false)],
        depArea: [],
        modality: [],
        // checkRoom: []
        patType: []
      }
      //   this.search()
    },
    search() {
      // 查询
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.fetchData()
        }
      })
    },
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['诊间预约人次', '自助预约人次', '集中预约人次', '检查预约总人次', '按时检查人次', '分时段预约检查人次', '爽约人次', '迟到人次', '总检查人次', '云影像', '云胶片']
        const filterVal = ['ZJYYRC', 'ZZYYRC', 'JZYYRC', 'JCYYZRC', 'ASJCRC', 'FSDYYJCRC', 'SYRC', 'CDRC', 'ZJJRC', 'YYX', 'YJP']
        const list = this.tableData
        this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader,
          data: this.excelData,
          filename: this.$route.name,
          autoWidth: true
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal, jsonData) {
      this.excelData = []
      jsonData.map((v, index) => {
        let tempArr = []
        filterVal.map(j => {
          if (v[j] || v[j] === 0) {
            if (j != 'children') {
              tempArr.push(v[j])
            } else {
              // 如果有children进行遍历
              this.formatJson(filterVal, v.children)
            }
          } else {
            tempArr.push('-')
          }
        })
        // console.log(tempArr)
        this.excelData.push(tempArr)
      })
    },
    fetchData() {
      this.dataLoading = true
      let data = {
        hospitalCode: this.formData.hospitalCode,
        dateArr: this.formData.timeRange.join(','),
        depArea: this.formData.depArea.join(','),
        dep: this.formData.dep.join(','),
        modality: this.formData.modality.join(','),
        patType: this.formData.patType.join(',')
      }
      getAppointmentMZJZYYQK(data).then(async res => {
        this.dataLoading = false
        if (!res) return
        console.log('res.Conten', res.Content)
        this.tableData = res.Content
      }).catch(() => {
        this.dataLoading = false
      })
    },
    getDepAreaOptions() {
      /* 影像区域列表 */
      let params = {
        hospitalCode: this.formData.hospitalCode
      }
      return new Promise(async resolve => {
        await getDepAreaList(params).then((res) => {
          if (res.code === 10000) {
            this.depAreaOptions = res.content.list
            resolve(res)
          }
        })
      })
    },
    getScheduledDepOptions() {
      /* 检查部门列表 */
      let params = {
        hospitalCode: this.formData.hospitalCode,
        depArea: this.formData.depArea.join(',')
      }
      return new Promise(async resolve => {
        await getDepList(params).then((res) => {
          if (res.code === 10000) {
            this.scheduledDepOptions = res.content.list
            resolve(res)
          }
        })
      })
    },
    getModalityOptions() {
      /* 检查设备列表 */
      let params = {
        hospitalCode: this.formData.hospitalCode,
        depArea: this.formData.depArea.join(','),
        dep: this.formData.dep.join(',')
      }
      return new Promise(async resolve => {
        await getModalityList(params).then((res) => {
          if (res.code === 10000) {
            this.modalityOptions = res.content.list
            resolve(res)
          }
        })
      })
    },
    getCheckRoomOptions() {
      /* 检查机房列表 */
      let params = {
        hospitalCode: this.formData.hospitalCode,
        depArea: this.formData.depArea.join(','),
        dep: this.formData.dep.join(','),
        modality: this.formData.modality.join(',')
      }
      return new Promise(async resolve => {
        await getCheckRoomList(params).then((res) => {
          if (res.code === 10000) {
            this.checkRoomOptions = res.content.list
            resolve(res)
          }
        })
      })
    },
    async handleChange(val) {
      switch (val) {
        case 'hospital':
          this.depAreaOptions = []
          this.scheduledDepOptions = []
          this.modalityOptions = []
          this.checkRoomOptions = []
          this.formData.depArea = []
          this.formData.dep = []
          this.formData.modality = []
          // this.formData.checkRoom = []
          try {
            this.search()
            await this.getDepAreaOptions()
            this.getScheduledDepOptions()
            this.getModalityOptions()
            // this.getCheckRoomOptions()
          } catch (err) {
            console.log(err)
          }
          break
        case 'depArea':
          this.scheduledDepOptions = []
          this.modalityOptions = []
          this.checkRoomOptions = []
          this.formData.dep = []
          this.formData.modality = []
          // this.formData.checkRoom = []
          try {
            await this.getScheduledDepOptions()
            this.getModalityOptions()
            // this.getCheckRoomOptions()
          } catch (err) {
            console.log(err)
          }
          break
        case 'dep':
          this.modalityOptions = []
          this.checkRoomOptions = []
          this.formData.modality = []
          // this.formData.checkRoom = []
          try {
            await this.getModalityOptions()
            // this.getCheckRoomOptions()
          } catch (err) {
            console.log(err)
          }
          break
        // case 'modality':
        //   this.checkRoomOptions = []
        //   this.formData.checkRoom = []
        //   this.getCheckRoomOptions()
        //   break
        default:
          break
      }
    }
  },
  beforeDestroy() { },
  destroyed() { },
  beforeUpdate() { },
  updated() { }
}
</script>
<style lang='scss' scoped>
.ky-container {
  .param-type_input {
    /deep/ .el-input__inner {
      width: 180px;
    }
  }
}
</style>
